<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" type="text/css" href="./css/slider.css" />
    <link rel="stylesheet" href="./css/index222.css">
</head>
<body>
    <!-- 1.头部区域开始 -->
    <div class="head">
        <!-- 顶部黑色区域 -->
       <div class="top clearfix">
             <div class="wrapper">
                <img src="./images/logo.jpg" alt="">
                 <span>legochina.cn</span>
                 <span class="fr">欢迎光临<a href="#">乐购</a>,请登录\<a href="#">注册</a></span>
             </div>
       </div>
       <!-- 顶部黑色区域结束 -->

       <!-- 搜索栏开始 -->
    <div class="wrapper">
           <div class="search">
             <form action="">
                 <input type="text" placeholder="创意文件">
                 <button type="submit"></button>
                
                 <!-- 购物车 -->
                <div class="fr clearfix">
                 <span >
                      <b></b>
                    购物车 3
                   
                 </span>
                 <span >我的订单</span>
                </div>
             </form>
             <!-- 购物车结束 -->

             <!-- 导航栏开始 -->
           <ul class="fl">
               <li><a href="#">图书</a></li>
               <li><a href="#">电子书</a></li>
               <li><a href="#">原创文学</a></li>
               <li><a href="#">服装</a></li>
               <li><a href="#">户外运动</a></li>
               <li><a href="#">孕婴童</a></li>
               <li><a href="#">家具</a></li>
               <li><a href="#">创意文具</a></li>
               <li><a href="#">地方特产</a></li>
               <li><a href="#">海外购</a></li>
               <li><a href="#">电器城</a></li>
           </ul>
             <!-- 导航栏结束 -->
          

    </div>
       <!-- 搜索栏结束 -->
     </div>
     </div>
    <!-- 头部结束 -->

    <!-- 2.海报区域 -->
<div id="banner" class="wrapper  clearfix">
      <!-- 左边分类 -->
    <ul class="category fl">
        <script>
            let date_p=[
                "图书/童书/电子书",
                "创意文具",
                "服饰、内衣",
                "鞋靴、箱包",
                "运动户外",
                "孕、婴、童",
                "家居、家纺、汽车",
                "家具、家装、康体",
                "美妆、个人护理、成人",
                "食品、茶酒、生鲜",
                "腕表、珠宝、眼镜",
                "手机、数码",
                "电脑办公",
                "家用电器",
            ]
            let date_div=[
                "box1",
                "box2",
                "box3",
                "box4",
                "box5",
                "box6",
                "box7",
                "box8",
                "box9",
                "box10",
                "box11",
                "box12",
                "box13",
                "box14",
            ]
            for(let i=0;i<14;i++){
                document.write(`
           <li>
                <p>${date_p[i]}</p>
                 <div>${date_div[i]}</div>
           </li>`)
            }
        </script>
        
        
    </ul>
    
    <!--轮播开始-->
  <div class="pptbox" id="bannerInner">
    <!--轮播的内容-->
    <ul class="innerwrapper">
      <li>
        <img src="images/banner1.jpg" />
      </li>
      <li>
        <a href="#"></a><img src="images/banner2.jpg" /></a>
      </li>
      <li>
        <a href="#"><img src="images/banner3.jpg" /></a>
      </li>
      <li>
        <a href="#"><img src="images/banner4.jpg" /></a>
      </li>
      <li>
        <a href="#"><img src="images/banner5.jpg" /></a>
      </li>
      <li>
        <a href="#"><img src="images/index11_08.jpg" /></a>
      </li>
    </ul>
    <!--数字控制器-->
    <ul class="controls">
      <li class="current">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <!--按钮控制器-->
    <span class="btnleft"></span>
    <span class="btnright"></span>
  </div>
  <!--轮播结束-->
  <script src="./lib/jquery.js" type="text/javascript" charset="utf-8"></script>
  <!--插件库-->
  <script src="./lib/slider.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    //主轮播图
    $("#bannerInner").tyslide({
      boxh: 430,//盒子的高度
      w: 1000,//盒子的宽度
      h: 400,//图片的高度
      isShow: true,//是否显示控制器
      isShowBtn: true,//是否显示左右按钮
      controltop: 0,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
      controlsW: 20,//控制按钮宽度
      controlsH: 20,//控制按钮高度
      radius: 10,//控制按钮圆角度数
      controlsColor: "#d7d7d7",//普通控制按钮的颜色
      controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
      isShowNum: true //是否显示数字
    });
  </script>
  
</div>

 
</body>
</html>